<div class="fullscreen table-detail layout layout-column">
    <div class="layout layout-column flex">
        <header class="app-header noshrink">
            <div fxLayout="row" fxLayoutAlign="start center" class="noshrink pct35 text-left padding-r-xs">
                <span id="tabledetail-back-btn" class="i-arrow-back margin-l header-icon noshrink" (click)="goBack()"></span>
                <span fxFlex="100%" class="margin-l-xs text-ellipsis" (click)="onOpenLeft(start)">{{title}}</span>
                <div class="noshrink" fxLayout="row" fxFlexAlign="end" (click)="onOpenLeft(start)" *ngIf="subTitle">
                    <span fxFlexAlign="end" class="triangle-bottomright"></span>
                </div>
            </div>
            <div class="text-xs pct40" fxLayout="row" fxLayoutAlign="center center">
                <div class="padding-2 pct40 switch-btn all-btn border-box text-center" [ngClass]="{'color-white bgcolor-primary': !isShowDetail, 'color-primary': isShowDetail}"
                    (click)="showOrderDetail(false, $event)">
                    <span>所有</span>
                </div>
                <div class="padding-2 pct40 switch-btn detail-btn border-box text-center" [ngClass]="{'color-primary': !isShowDetail, 'color-white bgcolor-primary': isShowDetail}"
                    (click)="showOrderDetail(true, $event)">
                    <span>详情</span>
                </div>
            </div>
            <div fxLayout="row" fxLayoutAlign="end center" class="pct25">
                <div class="ico-pickup text-m margin-r noshrink" (click)="pickUp(end)" *ngIf="showPickUp"></div>
                <span class="header-icon i-more-vert noshrink margin-r" (click)="end._isOpened?end.close():end.open()"></span>
            </div>
        </header>
        <md-sidenav-container fxLayout="column" class="sidenav-content-column">
            <div fxLayout="column" class="table-detail-info" fxFlex="100%">
                <div fxLayout="row" fxFlex="100%" fxLayoutAlign="center center" class="order-empty-container" *ngIf="!(tableInfo.orderList && tableInfo.orderList.length) && !loadingTableInfo">
                    <div fxLayout="column" class="order-empty">
                        <img src="./assets/images/order_empty.png" class="order-empty-img" />
                        <span class="order-empty-txt v-gap">暂时没有点单</span>
                    </div>
                </div>
                <md-list class="v-scroll table-detail-list" [ngClass]="{'hideself': !isShowDetail}" fxFlex="100%" *ngIf="tableInfo.orderList && tableInfo.orderList.length">
                    <md-list-item class="table-detail-item" *ngFor="let orderItem of tableInfo.orderList;trackBy: trackByFn">
                        <div class="pct100">
                            <div fxLayout="column" fxLayoutAlign="center start" class="table-detail-summary">
                                <div class="pct100">
                                    <div fxLayout="row">
                                        <!--<div fxFlex="100%" *ngIf="orderItem.extended" class="table-name margin-l-s">{{orderItem.extended.table.name}}</div>-->
                                        <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100%">
                                            <span class="color-primary margin-l-s">{{ (orderItem.amountDue ? orderItem.amountDue : 0) | number:'1.2-2' | currencySymbol}}</span>
                                        </div>
                                        <div fxLayout="row" fxLayoutAlign="start center" class="table-order-time margin-r-s" *ngIf="orderItem.extended">{{orderItem.createTime | date:'HH:mm'}}</div>
                                        <div fxLayout="row" fxLayoutAlign="center center" class="invt-list-btn noshrink margin-r-s" (click)="openRemindDialog(orderItem)">
                                            <span>催</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="invt-list-container">
                                <div fxLayout="row" fxLayoutAlign="start center" class="invt-list" *ngFor="let item of orderItem.cart.items">
                                    <div fxLayout="row" class="invt-list-sign margin-l-s pct100">
                                        <img class="invt-pic noshrink" src="{{(item.inventory && item.inventory.pic) ? item.inventory.pic : './assets/images/invt-default-pic.png'}}">
                                        <div fxLayout="row" fxLayoutAlign="center center" class="dishup-backdrop" [ngClass]="{'dishuped': (isServed(item) || isServedAll(item)), 'refunded': item.refundQty && item.qty == item.refundQty, 'waited':item.extended && item.extended.pickup && item.extended.pickup=='waiting' && (!item.refundQty || item.qty > item.refundQty)}">
                                            <div class="i-check-circle" *ngIf="isServedAll(item)"></div>
                                            <div class="dishup-txt" *ngIf="isServed(item)">
                                                <span>已上：</span>
                                                <span>{{(item.extended.dishup?item.extended.dishup.qty:0) | number:'1.0-2'}}</span>
                                            </div>
                                            <div class="icon-refund-circle-o" *ngIf="item.refundQty && item.qty == item.refundQty"></div>
                                            <div class="ico-waitpickup text-m" *ngIf="item.extended && item.extended.pickup && item.extended.pickup=='waiting' && (!item.refundQty || item.qty > item.refundQty)"></div>
                                        </div>
                                        <div class="margin-l-s invt-list-info" fxLayout="column">
                                            <div>{{item.inventoryName}}</div>
                                            <div class="invt-qty">
                                                <span>{{ "x" + item.qty}}</span>
                                                <span *ngIf="item.refundQty && item.refundQty > 0">已退：{{item.refundQty | number:'1.0-2'}}</span>
                                            </div>
                                            <div *ngIf="item.modifiers && item.modifiers.items && item.modifiers.items.length">
                                                <div *ngFor="let mod of item.modifiers.items" fxLayout="row" fxLayoutWrap="wrap">
                                                    <div class="tag" *ngFor="let opt of mod.options">
                                                        {{opt.name}}
                                                        <span *ngIf="opt.price > 0">{{'(' + (opt.price|number:'1.2-2'|currencySymbol)+ ')'}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div *ngIf="item.extended && item.extended.combo">
                                                <div *ngFor="let group of item.extended.combo.group">
                                                    <div *ngFor="let item of group.items">
                                                        <span>{{item.inventoryName}}</span>
                                                        <span>x{{item.qty}}</span>
                                                        <div fxLayout="row" fxLayoutWrap="wrap" *ngIf="item.modifiers && item.modifiers.items && item.modifiers.items.length">
                                                            <div fxLayout="row" fxLayoutWrap="wrap" *ngFor="let items of item.modifiers.items">
                                                                <div class="tag" *ngFor="let opt of items.options">
                                                                    <span>{{opt.name}}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="tag" *ngIf="item.extended && item.extended.description">
                                                            <span>{{item.extended.description}}</span>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="tag" *ngIf="item.extended && item.extended.description">
                                                <span>{{item.extended.description}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="invt-btn-container margin-r-s" fxLayout="column" fxFlexAlign="start" *ngIf="!(item.refundQty && item.qty == item.refundQty)">
                                        <div fxLayout="row" fxLayoutAlign="center center" class="invt-list-btn" (click)="onServed(orderItem,item)">
                                            <span>上</span>
                                        </div>
                                        <div *ngIf="hideRefundBtn()" fxLayout="row" fxLayoutAlign="center center" class="invt-list-btn v-gap" (click)="onRefuntInvt(item,orderItem)">
                                            <span>退</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </md-list-item>
                    <div *ngIf="tableInfo.orderList && tableInfo.orderList.length" class="show-finished v-gap-s text-s">已显示所有点菜单。</div>
                </md-list>
                <md-list class="v-scroll table-detail-list" [ngClass]="{'hideself': isShowDetail}" fxFlex="100%" *ngIf="tableInfo.orderList && tableInfo.orderList.length">
                    <md-list-item class="table-detail-item">
                        <div class="pct100">
                            <div fxLayout="column" fxLayoutAlign="center start" class="table-detail-summary">
                                <div class="pct100">
                                    <div fxLayout="row">
                                        <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100%">
                                            <span class="color-primary margin-l-s">{{totalAmount|number:'1.2-2'|currencySymbol}}</span>
                                        </div>
                                        <div fxLayout="row" fxLayoutAlign="center center" class="invt-list-btn bgcolor-primary color-white noshrink margin-r-s" (click)="openBacthInvtDialog(tableInfo.masterOrder)">
                                            <span>上</span>
                                        </div>
                                        <div fxLayout="row" fxLayoutAlign="center center" class="invt-list-btn bgcolor-primary color-white noshrink margin-r-s" (click)="openRemindDialog(tableInfo.masterOrder, true)">
                                            <span>催</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="invt-list-container">
                                <div *ngFor="let orderItem of tableInfo.orderList">
                                    <div fxLayout="row" fxLayoutAlign="start center" class="invt-list" *ngFor="let item of orderItem.cart.items">
                                        <div fxLayout="row" class="invt-list-sign margin-l-s pct100">
                                            <img class="invt-pic noshrink" src="{{(item.inventory && item.inventory.pic) ? item.inventory.pic : './assets/images/invt-default-pic.png'}}">
                                            <div fxLayout="row" fxLayoutAlign="center center" class="dishup-backdrop" [ngClass]="{'dishuped': (isServed(item) || isServedAll(item)), 'refunded': item.refundQty && item.qty == item.refundQty, 'waited':item.extended && item.extended.pickup && item.extended.pickup=='waiting' && (!item.refundQty || item.qty > item.refundQty)}">
                                                <div class="i-check-circle" *ngIf="isServedAll(item)"></div>
                                                <div class="dishup-txt" *ngIf="isServed(item) && !(item.refundQty && item.qty == item.refundQty)">
                                                    <span>已上：</span>
                                                    <span>{{(item.extended.dishup?item.extended.dishup.qty:0) | number:'1.0-2'}}</span>
                                                </div>
                                                <div class="icon-refund-circle-o" *ngIf="item.refundQty && item.qty == item.refundQty"></div>
                                                <div class="ico-waitpickup text-m" *ngIf="item.extended && item.extended.pickup && item.extended.pickup=='waiting' && (!item.refundQty || item.qty > item.refundQty)"></div>
                                            </div>
                                            <div class="margin-l-s invt-list-info" fxLayout="column">
                                                <div>{{item.inventoryName}}</div>
                                                <div class="invt-qty">
                                                    <span>{{ "x" + item.qty}}</span>
                                                    <span *ngIf="item.refundQty && item.refundQty > 0">已退：{{(item.refundQty) | number:'1.0-2'}}</span>
                                                </div>
                                                <div *ngIf="item.modifiers && item.modifiers.items && item.modifiers.items.length">
                                                    <div *ngFor="let mod of item.modifiers.items" fxLayout="row" fxLayoutWrap="wrap">
                                                        <div class="tag" *ngFor="let opt of mod.options">
                                                            {{opt.name}}
                                                            <span *ngIf="opt.price > 0">{{'(' + (opt.price|number:'1.2-2'|currencySymbol)+ ')'}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div *ngIf="item.extended && item.extended.combo">
                                                    <div *ngFor="let group of item.extended.combo.group">
                                                        <div *ngFor="let item of group.items">
                                                            <span>{{item.inventoryName}}</span>
                                                            <span>x{{item.qty}}</span>
                                                            <div fxLayout="row" fxLayoutWrap="wrap" *ngIf="item.modifiers && item.modifiers.items && item.modifiers.items.length">
                                                                <div fxLayout="row" fxLayoutWrap="wrap" *ngFor="let items of item.modifiers.items">
                                                                    <div class="tag" *ngFor="let opt of items.options">
                                                                        <span>{{opt.name}}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="tag" *ngIf="item.extended && item.extended.description">
                                                                <span>{{item.extended.description}}</span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="tag" *ngIf="item.extended && item.extended.description">
                                                    <span>{{item.extended.description}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="invt-btn-container margin-r-s" fxLayout="column" fxFlexAlign="start" *ngIf="!(item.refundQty && item.qty == item.refundQty)">
                                            <div fxLayout="row" fxLayoutAlign="center center" class="invt-list-btn" (click)="onServed(orderItem,item)">
                                                <span>上</span>
                                            </div>
                                            <div *ngIf="hideRefundBtn()" fxLayout="row" fxLayoutAlign="center center" class="invt-list-btn v-gap" (click)="onRefuntInvt(item,orderItem)">
                                                <span>退</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </md-list-item>
                    <div *ngIf="tableInfo.orderList && tableInfo.orderList.length" class="show-finished v-gap-s text-s">已显示所有点菜单。</div>
                </md-list>
            </div>
            <div fxLayout="row" fxLayoutAlign="center center" class="order-place i-shopping-cart bgcolor-accent color-white" (click)="onRedirectToOrder()"></div>
            <div fxLayout="row" fxLayoutAlign="start center" class="color-primary table-order">
                <div fxFlex="100%" fxLayout="row" fxLayoutAlign="start center">
                    <span class="margin-l">
                        {{totalAmount|number:'1.2-2'|currencySymbol}}
                    </span>
                </div>
                <div fxLayout="row" fxLayoutAlign="center center" class="bgcolor-accent noshrink table-order-btn normal-btn text-s color-white"
                    (click)="onOpenTableOrder()">
                    <span>
                        台桌订单
                    </span>
                </div>
            </div>
            <md-sidenav #end align="end" class="table-operate-side">
                <md-nav-list>
                    <div fxLayout="row" fxLayoutAlign="start center" class="table-operate-item margin-l-xs" (click)="onCloseTable(end)">
                        <span class="i-cancel color-lightgray"></span>
                        <div class="margin-l-xs side-text">关台</div>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="start center" class="table-operate-item margin-l-xs" (click)="onShowTransferDialog(end)">
                        <span class="i-launch color-lightgray"></span>
                        <div class="margin-l-xs side-text">转台</div>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="start center" class="table-operate-item margin-l-xs" (click)="onShowMergeTableDialog(end)">
                        <span class="icon-merge color-lightgray"></span>
                        <div class="margin-l-xs side-text">并台</div>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="start center" class="table-operate-item margin-l-xs" (click)="onCancelMergeTable(end)"
                        *ngIf="isMerge">
                        <span class="i-remove-circle color-lightgray"></span>
                        <div class="margin-l-xs side-text">取消并台</div>
                    </div>
                </md-nav-list>
            </md-sidenav>
            <md-sidenav #start align="start" class="table-group-list bgcolor-dark color-white">
                <md-nav-list>
                    <div class="table-group-list-item padding-8" [ngClass]="{'selected': item.selected}" *ngFor="let item of tableGroupList"
                        (click)="onChangeTable(item,start)">{{item.name}}</div>
                </md-nav-list>
            </md-sidenav>
        </md-sidenav-container>
    </div>
</div>